<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmarTest Studio - 项目详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/project.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/notification.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/activity-properties.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ui-tree.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ui-viewer.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/ai-assistant.css') }}">
</head>
<body>
    <!-- 顶部标题栏 -->
    <header class="header">
        <div class="header-left">
            <button class="btn menu-btn" title="菜单">
                <i class="bi bi-grid-3x3-gap-fill"></i>
            </button>
            <button class="btn home-btn" title="首页" onclick="window.location.href='/'">
                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="SmarTest Studio" class="logo">
                <span>SmarTest Studio</span>
            </button>
            <div class="project-path">
                <span class="separator"></span>
                <span class="path" data-project-owner="{{ project.owner }}" data-project-name="{{ project.name }}">{{ project.owner }}/{{ project.name }}</span>
            </div>
        </div>
        <div class="header-right">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="permissionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-shield-lock"></i>
                    <span>权限管理</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="permissionDropdown">
                    <li><a class="dropdown-item" href="#">用户管理</a></li>
                    <li><a class="dropdown-item" href="#">角色管理</a></li>
                    <li><a class="dropdown-item" href="#">权限设置</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="helpDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-question-circle"></i>
                    <span>帮助</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="helpDropdown">
                    <li><a class="dropdown-item" href="#">使用指南</a></li>
                    <li><a class="dropdown-item" href="#">API文档</a></li>
                    <li><a class="dropdown-item" href="#">关于</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <ul class="dropdown-menu notification-menu" aria-labelledby="notificationDropdown">
                    <li><a class="dropdown-item" href="#">测试完成: 项目1</a></li>
                    <li><a class="dropdown-item" href="#">设备连接成功: 设备2</a></li>
                    <li><a class="dropdown-item" href="#">新报告生成</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ url_for('static', filename='img/avatar.svg') }}" alt="用户头像" class="avatar">
                </button>
                <ul class="dropdown-menu" aria-labelledby="userDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">设置</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 编辑栏 -->
    <div class="edit-toolbar">
        <div class="edit-toolbar-left">
            <button class="btn btn-outline-secondary" title="返回" onclick="window.location.href='/'">
                <i class="bi bi-arrow-left"></i>
            </button>
            <button class="btn btn-outline-primary" title="保存">
                <i class="bi bi-save"></i>
            </button>
            <button class="btn btn-outline-secondary" title="撤销">
                <i class="bi bi-arrow-counterclockwise"></i>
            </button>
            <button class="btn btn-outline-secondary" title="重做">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <div class="separator"></div>
            <button class="btn btn-success" title="运行">
                <i class="bi bi-play-fill"></i>
            </button>
            <button class="btn btn-danger" title="停止">
                <i class="bi bi-stop-fill"></i>
            </button>
            <div class="separator"></div>
            <button class="btn btn-outline-danger" title="删除">
                <i class="bi bi-trash"></i>
            </button>
        </div>
        <div class="edit-toolbar-right">
            <button class="btn btn-outline-primary" title="分享">
                <i class="bi bi-share"></i>
            </button>
            <button class="btn btn-outline-primary" title="导出">
                <i class="bi bi-download"></i>
            </button>
            <select class="form-select device-select">
                <!-- 这里动态获取设备列表 -->
            </select>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="project-container">
        <!-- 左侧菜单栏 -->
        <div class="left-sidebar">
            <button class="sidebar-btn" data-target="explorer">
                <i class="bi bi-folder"></i>
                <span>Explorer</span>
            </button>
            <button class="sidebar-btn" data-target="error">
                <i class="bi bi-exclamation-triangle"></i>
                <span>Error</span>
            </button>
            <button class="sidebar-btn" data-target="history">
                <i class="bi bi-clock-history"></i>
                <span>Change History</span>
            </button>
        </div>

        <!-- 左侧面板 -->
        <div class="left-panel">
            <div class="panel-content active" id="explorer-panel">
                <div class="panel-header collapsible" data-bs-toggle="collapse" data-bs-target="#testcases-body" aria-expanded="false">
                    <div class="header-content">
                        <i class="bi bi-chevron-down collapse-icon"></i>
                        <h5>测试用例</h5>
                        <div class="header-actions">
                            <button class="btn btn-sm btn-outline-secondary add-btn" title="新增测试用例">
                                <i class="bi bi-plus-circle"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary refresh-btn" title="刷新测试用例">
                                <i class="bi bi-arrow-repeat"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel-body collapse" id="testcases-body">
                    <ul class="file-tree" id="project-testcases">
                        <!-- 测试用例将通过JavaScript动态加载 -->
                        <div class="loading-indicator">
                            <i class="bi bi-arrow-repeat spin"></i> 正在加载...
                        </div>
                    </ul>
                </div>
                <div class="panel-header collapsible" data-bs-toggle="collapse" data-bs-target="#testtasks-body" aria-expanded="false">
                    <div class="header-content">
                        <i class="bi bi-chevron-down collapse-icon"></i>
                        <h5>测试任务</h5>
                        <div class="header-actions">
                            <button class="btn btn-sm btn-outline-secondary add-btn" title="新增测试任务">
                                <i class="bi bi-plus-circle"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary refresh-btn" title="刷新测试任务">
                                <i class="bi bi-arrow-repeat"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel-body collapse" id="testtasks-body">
                    <ul class="file-tree" id="project-testtasks">
                        <!-- 测试任务将通过JavaScript动态加载 -->
                        <div class="loading-indicator">
                            <i class="bi bi-arrow-repeat spin"></i> 正在加载...
                        </div>
                    </ul>
                </div>
            </div>
            <div class="panel-content" id="error-panel">
                <div class="panel-header">
                    <h5>错误信息</h5>
                </div>
                <div class="panel-body">
                    <ul class="error-list">
                        <li class="error-item">
                            <span class="error-type"><i class="bi bi-exclamation-circle"></i> 警告</span>
                            <span class="error-message">活动5缺少必要参数</span>
                            <span class="error-location">主流程.test:5</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel-content" id="history-panel">
                <div class="panel-header">
                    <h5>修改历史</h5>
                </div>
                <div class="panel-body">
                    <ul class="history-list">
                        <li class="history-item">
                            <span class="history-time">2023-10-10 14:30</span>
                            <span class="history-user">admin</span>
                            <span class="history-action">添加了活动 "点击登录按钮"</span>
                        </li>
                        <li class="history-item">
                            <span class="history-time">2023-10-10 14:25</span>
                            <span class="history-user">admin</span>
                            <span class="history-action">修改了活动 "输入密码"</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 流程编辑器 -->
            <div class="flow-editor">
                <div class="flow-container" id="flow-container">
                    <!-- 测试活动将通过JavaScript动态加载 -->
                    <div class="empty-flow-message">
                        <!-- <i class="bi bi-info-circle"></i> -->
                        <p>从左侧Explorer选择或者新建测试用例开始</p>
                    </div>
                </div>
            </div>

            <!-- 设备桌面 -->
            <div class="device-screen">
                <div class="device-frame">
                    <!-- 这里显示设备屏幕内容 -->
                </div>
                <div class="device-controls">
                    <button class="btn btn-sm btn-outline-secondary">刷新</button>
                    <button class="btn btn-sm btn-outline-secondary">截图</button>
                    <button class="btn btn-sm btn-outline-secondary">录制</button>
                </div>
            </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <div class="panel-content active" id="console-panel">
                <div class="panel-header">
                    <h5>控制台</h5>
                    <button class="btn btn-sm btn-link"><i class="bi bi-trash"></i></button>
                </div>
                <div class="panel-body">
                    <div class="console-output">
                        <div class="console-line"><span class="timestamp">[14:30:15]</span> 开始执行测试...</div>
                        <div class="console-line"><span class="timestamp">[14:30:16]</span> 启动应用: com.example.app</div>
                        <div class="console-line"><span class="timestamp">[14:30:19]</span> 应用启动成功</div>
                        <div class="console-line"><span class="timestamp">[14:30:20]</span> 点击元素: login_button</div>
                        <div class="console-line error"><span class="timestamp">[14:30:20]</span> 错误: 元素未找到</div>
                    </div>
                </div>
            </div>
            <div class="panel-content" id="ai-panel">
                <div class="panel-header">
                    <h5>AI助手</h5>
                </div>
                <div class="panel-body">
                    <div class="ai-chat">
                        <!-- AI聊天内容将通过JavaScript动态生成 -->
                    </div>
                    <div class="ai-input">
                        <input type="text" class="form-control" placeholder="输入问题..." style="flex: 1;">
                        <button class="btn btn-primary"><i class="bi bi-send"></i></button>
                    </div>
                </div>
            </div>
            <div class="panel-content" id="log-panel">
                <div class="panel-header">
                    <h5>日志</h5>
                    <button class="btn btn-sm btn-link"><i class="bi bi-trash"></i></button>
                </div>
                <div class="panel-body">
                    <div class="log-output">
                        <div class="log-line info"><span class="timestamp">[14:30:15]</span> <span class="log-level">[INFO]</span> 测试会话已启动</div>
                        <div class="log-line info"><span class="timestamp">[14:30:16]</span> <span class="log-level">[INFO]</span> 连接设备: 测试设备1</div>
                        <div class="log-line debug"><span class="timestamp">[14:30:16]</span> <span class="log-level">[DEBUG]</span> 设备分辨率: 1080x2340</div>
                        <div class="log-line info"><span class="timestamp">[14:30:16]</span> <span class="log-level">[INFO]</span> 执行活动: 启动应用</div>
                        <div class="log-line error"><span class="timestamp">[14:30:20]</span> <span class="log-level">[ERROR]</span> 元素未找到: login_button</div>
                    </div>
                </div>
            </div>
            <div class="panel-content" id="uiviewer-panel">
                <div class="panel-header">
                    <h5>UiViewer</h5>
                    <button class="btn btn-sm btn-link refresh-ui-tree" title="刷新控件树"><i class="bi bi-arrow-repeat"></i></button>
                </div>
                <div class="panel-body">
                    <div class="ui-tree-container">
                        <ul class="ui-tree" id="ui-element-tree">
                            <!-- UI控件树将通过JavaScript动态加载 -->
                            <div class="loading-indicator">
                                <i class="bi bi-arrow-repeat spin"></i> 正在加载控件树...
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧菜单栏 -->
        <div class="right-sidebar">
            <button class="sidebar-btn" data-target="console">
                <i class="bi bi-terminal"></i>
                <span>Console</span>
            </button>
            <button class="sidebar-btn" data-target="ai">
                <i class="bi bi-robot"></i>
                <span>AI</span>
            </button>
            <button class="sidebar-btn" data-target="log">
                <i class="bi bi-journal-text"></i>
                <span>Log</span>
            </button>
            <button class="sidebar-btn" data-target="uiviewer">
                <i class="bi bi-grid-3x3"></i>
                <span>UiViewer</span>
            </button>
        </div>

    </div>

    <!-- 活动选择对话框 -->
    <div class="modal fade" id="activitySelectorModal" tabindex="-1" aria-labelledby="activitySelectorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="activitySelectorModalLabel">选择活动类型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <!-- 搜索框 -->
                    <div class="activity-search-container mb-3">
                        <div id="selectedCategoryTag" class="selected-category-tag d-none">
                            <span class="tag-text"></span>
                            <button type="button" class="btn-close btn-close-sm" aria-label="Remove category"></button>
                        </div>
                        <input type="text" class="form-control" id="activitySearchInput" placeholder="搜索活动...">
                    </div>
                    
                    <!-- 搜索结果区域 -->
                    <div id="searchResultsContainer" class="d-none">
                        <div class="activity-list">
                            <!-- 搜索结果将动态填充在这里 -->
                        </div>
                    </div>
                    
                    <!-- 初始视图区域 -->
                    <div id="initialViewContainer">
                        <!-- 最近常用活动列表 -->
                        <div class="recent-activities mb-3">
                            <h6 class="section-title">最近常用</h6>
                            <div class="activity-list">
                                <div class="activity-item" data-type="click">
                            <i class="bi bi-hand-index"></i>
                            <span>点击元素</span>
                        </div>
                        <div class="activity-item" data-type="input">
                            <i class="bi bi-keyboard"></i>
                            <span>输入文本</span>
                        </div>
                        <div class="activity-item" data-type="startApp">
                            <i class="bi bi-play-circle"></i>
                            <span>启动应用</span>
                        </div>
                            </div>
                        </div>
                        
                        <!-- 分类浏览标签 -->
                        <div class="category-section mb-2">
                            <h6 class="section-title">Browse by category</h6>
                        </div>
                        
                        <!-- 活动分类网格 -->
                        <div class="category-grid">
                            <div class="category-item" data-category="ui-automation">
                                <i class="bi bi-phone"></i>
                                <span>UI Automation</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 活动编辑模态框 -->
    <div class="modal fade" id="stepEditModal" tabindex="-1" aria-labelledby="stepEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stepEditModalLabel">编辑活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <form id="stepEditForm">
                        <input type="hidden" id="stepId" name="stepId">
                        <input type="hidden" id="stepType" name="stepType">
                        <div class="mb-3">
                            <label for="stepTitle" class="form-label">活动名称</label>
                            <input type="text" class="form-control" id="stepTitle" name="stepTitle" required>
                        </div>
                        <div id="stepParamsContainer">
                            <!-- 动态生成的参数表单 -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-activity-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本引用 -->
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/a11y-modal-fix.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ url_for('static', filename='js/http-client.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socketio-client.js') }}"></script>
    <script src="{{ url_for('static', filename='js/webrtc-client.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ui-viewer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/ai-assistant.js') }}"></script>
    <script src="{{ url_for('static', filename='js/device-selector.js') }}"></script>
    <script src="{{ url_for('static', filename='js/project-page.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/project-explorer.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/activity-editor.js') }}"></script>
    <script src="{{ url_for('static', filename='js/activity-properties.js') }}"></script>
</body>
</html>